<template>
  <div>
    <!-- 第一行开始 -->
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-button type="primary" style="margin-right:15px">添加</el-button>
      <el-form-item>
        <el-input v-model="form.name" placeholder="请输入栏目名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="form.status" placeholder="请选择状态" clearable>
          <el-option label="正常" value="正常"></el-option>
          <el-option label="下架" value="下架"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="form.productCategoryId" placeholder="请选择栏目" clearable>
          <el-option :label="item.name" v-for="item in category" :key="item.id" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="toSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 第一行结束 -->
    <!-- 表格开始 -->
    <div>
      <el-table :data="tableData" style="width:100%" v-loading='loading'>
        <el-table-column type="index" :index="1" label="序号" width="50"></el-table-column>
        <el-table-column prop="id" label="产品编号" width="220"></el-table-column>
        <el-table-column prop="name" label="名称" width="220"></el-table-column>
        <el-table-column label="图片" width="180">
          <template slot-scope="scope">
            <el-image style="width:30px; height: 30px" :src="scope.row.photo"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" width="120"></el-table-column>
        <el-table-column prop="status" label="状态" width="180">
            <template slot-scope="scope">
               <el-tag type="success" v-if='scope.row.status==="正常"'>正常</el-tag>
            <el-tag type="danger" v-else>下架</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="category.name" label="所属栏目" width="120"></el-table-column>
        <el-table-column label="操作" width="160">
          <template slot-scope="scope">
            <el-button @click="toEdit(scope.row)" type="text" size="small">编辑</el-button>
            <el-button  type="text" size="small" v-if='scope.row.status==="下架"' @click='tochangeStatus(scope.row.id,"上架")'>上架</el-button>
            <el-button  type="text" size="small" v-else @click='tochangeStatus(scope.row.id,"下架")'>下架</el-button>

          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 表格结束 -->
    <!-- 分页开始 -->
    <div class='page'>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-sizes="[5, 10,15, 20]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <!-- 分页结束 -->
  </div>
</template>
<script>
// 引入栏目数据
import { pageQuery } from "@/api/column";
// 引入产品分页
import { pageQuery as pageQueryPro ,online,offline,saveOrUpdate} from "@/api/product";
export default {
  data() {
    return {
      form: {},
      loading:false,
      total: 0,
      params: {
        page: 1,
        pageSize: 10
      },
      category: [],
      loading:false,
      tableData: []
    };
  },
  watch: {
    params: {
      handler() {
        this.categoryPage();
      },
      deep: true
    }
  },
  created() {
    this.categoryPro();
    this.categoryPage();
  },
  methods: {
    //   给产品上架下架
    async tochangeStatus(id,type){
        let res={}
        if(type==='上架'){
           res=await online({id})
        }else{
           res =await offline({id})
        }
        this.$message({
            type:"success",
            message:res.message
        });
        this.categoryPage()
    },
    //   封装分页查询
    async categoryPage() {
      this.loading=true
      let temp = {
        ...this.params,
        ...this.form
      };
      for (let key in temp) {
        if (!temp[key]) {
          delete temp[key];
        }
      }
      let res = await pageQueryPro(temp);
      console.log(res);
      this.tableData = res.data.list;
      this.total = res.data.total;
      this.loading=false
    },
    //   给搜索按钮绑定事件 --模糊查询
    toSearch() {
      this.categoryPage();
    },
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize;
    },
    handleCurrentChange(page) {
      this.params.page = page;
    },
    // 封装所有栏目
    async categoryPro() {
      let res = await pageQuery({
        page: 1,
        pageSize: 10
      });
      // console.log(res)
      this.category = res.data.list;
    }
  }
};
</script>
<style lang="scss">
</style>